import React, { FC, useMemo } from 'react';
import { Select, DataSet, Form } from 'choerodon-ui/pro';
import { FieldType } from 'choerodon-ui/pro/lib/data-set/enum';

const SelectCascade: FC = () => {
  const handleDataSetChange = ({value, oldValue}: any) => {
    console.log(value, oldValue);
  };
  const ds = useMemo(
    () =>
      new DataSet({
        autoCreate: true,
        fields: [
          {
            name: 'province',
            label: '省',
            lookupCode: 'SHENG',
            valueField: 'codeValueId',
            defaultValue: '10206',
          },
          {
            name: 'city',
            type: FieldType.number,
            valueField: 'codeValueId',
            label: '市',
            lookupCode: 'SHI',
            cascadeMap: { parentCodeValueId: 'province' },
          },
        ],
        events: {
          update: handleDataSetChange,
        },
      }),
    []
  );
  return (
    <Form dataSet={ds} columns={3}>
      <Select label="省" name="province" />
      <Select label="市" name="city" />
    </Form>
  );
};

export default SelectCascade;
